<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>房源查询 - 智慧园区</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: #f5f5f5;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        .ios-status-bar {
            height: 44px;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            padding: 0 16px;
            position: relative;
            z-index: 50;
        }
        
        .ios-status-bar.dark {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .ios-nav-bar {
            height: 44px;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            padding: 0 16px;
            position: relative;
        }
        
        .ios-nav-bar.dark {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        .glass-card.dark {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .main-content {
            height: calc(100vh - 88px); /* 状态栏 + 导航栏的高度 */
            overflow-y: auto;
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
            padding-bottom: 20px;
        }
        
        .main-content::-webkit-scrollbar {
            display: none;
        }
        
        .ios-search {
            background: rgba(142, 142, 147, 0.12);
            border-radius: 10px;
            padding: 8px 12px;
            display: flex;
            align-items: center;
        }
        
        .ios-search.dark {
            background: rgba(142, 142, 147, 0.2);
        }
        
        .ios-search-input {
            background: transparent;
            border: none;
            font-size: 17px;
            color: #000;
            width: 100%;
            margin-left: 8px;
        }
        
        .ios-search-input.dark {
            color: #fff;
        }
        
        .ios-search-input::placeholder {
            color: #8e8e93;
        }
        
        .ios-search-input:focus {
            outline: none;
        }
        
        .filter-chip {
            background: #f3f4f6;
            border-radius: 16px;
            padding: 6px 12px;
            font-size: 13px;
            color: #4b5563;
            margin-right: 8px;
            white-space: nowrap;
        }
        
        .filter-chip.active {
            background: #e0f2fe;
            color: #0369a1;
        }
        
        .filter-chip.dark {
            background: #374151;
            color: #e5e7eb;
        }
        
        .filter-chip.active.dark {
            background: #075985;
            color: #e0f2fe;
        }
        
        .housing-item {
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .housing-item.dark {
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .tag {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 4px;
            margin-right: 4px;
        }
        
        .tag-blue {
            background-color: rgba(59, 130, 246, 0.1);
            color: #3b82f6;
        }
        
        .tag-green {
            background-color: rgba(16, 185, 129, 0.1);
            color: #10b981;
        }
        
        .tag-purple {
            background-color: rgba(139, 92, 246, 0.1);
            color: #8b5cf6;
        }
        
        .tag-blue.dark {
            background-color: rgba(59, 130, 246, 0.2);
            color: #60a5fa;
        }
        
        .tag-green.dark {
            background-color: rgba(16, 185, 129, 0.2);
            color: #34d399;
        }
        
        .tag-purple.dark {
            background-color: rgba(139, 92, 246, 0.2);
            color: #a78bfa;
        }
        
        /* 暗色模式样式 */
        .dark-mode .glass-card {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-status-bar {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-nav-bar {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-search {
            background: rgba(142, 142, 147, 0.2);
        }
        
        .dark-mode .ios-search-input {
            color: #fff;
        }
        
        .dark-mode .filter-chip {
            background: #374151;
            color: #e5e7eb;
        }
        
        .dark-mode .filter-chip.active {
            background: #075985;
            color: #e0f2fe;
        }
        
        .dark-mode .housing-item {
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .dark-mode .tag-blue {
            background-color: rgba(59, 130, 246, 0.2);
            color: #60a5fa;
        }
        
        .dark-mode .tag-green {
            background-color: rgba(16, 185, 129, 0.2);
            color: #34d399;
        }
        
        .dark-mode .tag-purple {
            background-color: rgba(139, 92, 246, 0.2);
            color: #a78bfa;
        }
    </style>
</head>
<body>
    <div id="app" class="relative h-full">
        <!-- iOS 状态栏 -->
        <div class="ios-status-bar">
            <div class="flex justify-between items-center w-full">
                <div class="text-sm font-medium text-gray-800 dark:text-gray-200">9:41</div>
                <div class="flex space-x-2">
                    <i class="fas fa-signal text-gray-800 dark:text-gray-200"></i>
                    <i class="fas fa-wifi text-gray-800 dark:text-gray-200"></i>
                    <i class="fas fa-battery-full text-gray-800 dark:text-gray-200"></i>
                </div>
            </div>
        </div>
        
        <!-- iOS 导航栏 -->
        <div class="ios-nav-bar">
            <div class="flex justify-between items-center w-full">
                <div class="flex items-center">
                    <i class="fas fa-chevron-left text-blue-500 dark:text-blue-400 mr-2"></i>
                    <span class="text-gray-800 dark:text-gray-200">返回</span>
                </div>
                <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">房源查询</div>
                <div class="w-16"></div> <!-- 占位，保持标题居中 -->
            </div>
        </div>
        
        <!-- 主内容 -->
        <div class="main-content bg-gray-50 dark:bg-gray-900">
            <!-- 搜索栏 -->
            <div class="px-4 py-3 bg-white dark:bg-gray-800 shadow-sm">
                <div class="ios-search">
                    <i class="fas fa-search text-gray-400"></i>
                    <input type="text" placeholder="搜索房源" class="ios-search-input">
                </div>
            </div>
            
            <!-- 筛选条件 -->
            <div class="px-4 py-3 bg-white dark:bg-gray-800 border-t border-gray-100 dark:border-gray-700 overflow-x-auto">
                <div class="flex space-x-2 min-w-max">
                    <div class="filter-chip active">全部</div>
                    <div class="filter-chip">写字楼</div>
                    <div class="filter-chip">商铺</div>
                    <div class="filter-chip">厂房</div>
                    <div class="filter-chip">仓库</div>
                    <div class="filter-chip">价格 <i class="fas fa-chevron-down text-xs ml-1"></i></div>
                    <div class="filter-chip">面积 <i class="fas fa-chevron-down text-xs ml-1"></i></div>
                    <div class="filter-chip">更多筛选 <i class="fas fa-sliders-h text-xs ml-1"></i></div>
                </div>
            </div>
            
            <!-- 房源列表 -->
            <div class="px-4 py-3">
                <!-- 统计信息 -->
                <div class="text-sm text-gray-500 dark:text-gray-400 mb-3">
                    共找到 <span class="font-medium text-gray-800 dark:text-gray-200">28</span> 个符合条件的房源
                </div>
                
                <!-- 房源卡片 -->
                <div class="glass-card overflow-hidden mb-4">
                    <div class="housing-item">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1497366858526-0766cadbe8fa?q=80&w=2069&auto=format&fit=crop" 
                                 alt="Office Space" 
                                 class="w-full h-48 object-cover">
                            <div class="absolute top-3 left-3 bg-white/80 dark:bg-black/60 backdrop-blur-sm px-2 py-1 rounded-md text-sm font-medium text-gray-800 dark:text-gray-200">
                                写字楼
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-1">科技园A区 5层独立办公室</div>
                            <div class="flex flex-wrap gap-1 mb-2">
                                <span class="tag tag-blue">精装修</span>
                                <span class="tag tag-green">拎包入住</span>
                                <span class="tag tag-purple">采光好</span>
                            </div>
                            <div class="text-sm text-gray-600 dark:text-gray-400 mb-3">
                                位于科技园核心区，交通便利，配套设施齐全，24小时安保，适合科技企业入驻。
                            </div>
                            <div class="flex justify-between items-center">
                                <div>
                                    <span class="text-lg font-bold text-blue-600 dark:text-blue-400">¥6,800</span>
                                    <span class="text-sm text-gray-500 dark:text-gray-400">/月</span>
                                    <span class="text-sm text-gray-500 dark:text-gray-400 ml-2">120㎡</span>
                                </div>
                                <button class="px-4 py-1.5 bg-blue-500 dark:bg-blue-600 text-white text-sm rounded-full">
                                    查看详情
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="glass-card overflow-hidden mb-4">
                    <div class="housing-item">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1604328698692-f76ea9498e76?q=80&w=2070&auto=format&fit=crop" 
                                 alt="Office Space" 
                                 class="w-full h-48 object-cover">
                            <div class="absolute top-3 left-3 bg-white/80 dark:bg-black/60 backdrop-blur-sm px-2 py-1 rounded-md text-sm font-medium text-gray-800 dark:text-gray-200">
                                商铺
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-1">创新路商业街 临街旺铺</div>
                            <div class="flex flex-wrap gap-1 mb-2">
                                <span class="tag tag-blue">临街</span>
                                <span class="tag tag-green">客流大</span>
                                <span class="tag tag-purple">可明火</span>
                            </div>
                            <div class="text-sm text-gray-600 dark:text-gray-400 mb-3">
                                位于创新路商业街黄金位置，人流量大，适合餐饮、零售等业态，周边配套成熟。
                            </div>
                            <div class="flex justify-between items-center">
                                <div>
                                    <span class="text-lg font-bold text-blue-600 dark:text-blue-400">¥12,500</span>
                                    <span class="text-sm text-gray-500 dark:text-gray-400">/月</span>
                                    <span class="text-sm text-gray-500 dark:text-gray-400 ml-2">85㎡</span>
                                </div>
                                <button class="px-4 py-1.5 bg-blue-500 dark:bg-blue-600 text-white text-sm rounded-full">
                                    查看详情
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="glass-card overflow-hidden mb-4">
                    <div class="housing-item">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1581578017093-cd30fce4eeb7?q=80&w=2070&auto=format&fit=crop" 
                                 alt="Office Space" 
                                 class="w-full h-48 object-cover">
                            <div class="absolute top-3 left-3 bg-white/80 dark:bg-black/60 backdrop-blur-sm px-2 py-1 rounded-md text-sm font-medium text-gray-800 dark:text-gray-200">
                                厂房
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-1">高新区标准厂房</div>
                            <div class="flex flex-wrap gap-1 mb-2">
                                <span class="tag tag-blue">独栋</span>
                                <span class="tag tag-green">有产证</span>
                                <span class="tag tag-purple">可环评</span>
                            </div>
                            <div class="text-sm text-gray-600 dark:text-gray-400 mb-3">
                                高新区标准厂房，层高6米，配套50吨行车，水电气齐全，适合生产制造型企业。
                            </div>
                            <div class="flex justify-between items-center">
                                <div>
                                    <span class="text-lg font-bold text-blue-600 dark:text-blue-400">¥35,000</span>
                                    <span class="text-sm text-gray-500 dark:text-gray-400">/月</span>
                                    <span class="text-sm text-gray-500 dark:text-gray-400 ml-2">1200㎡</span>
                                </div>
                                <button class="px-4 py-1.5 bg-blue-500 dark:bg-blue-600 text-white text-sm rounded-full">
                                    查看详情
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="glass-card overflow-hidden mb-4">
                    <div class="housing-item">
                        <div class="relative">
                            <img src="https://images.unsplash.com/photo-1565793298595-6a879b1d9492?q=80&w=2071&auto=format&fit=crop" 
                                 alt="Office Space" 
                                 class="w-full h-48 object-cover">
                            <div class="absolute top-3 left-3 bg-white/80 dark:bg-black/60 backdrop-blur-sm px-2 py-1 rounded-md text-sm font-medium text-gray-800 dark:text-gray-200">
                                写字楼
                            </div>
                        </div>
                        <div class="p-4">
                            <div class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-1">科技园B区 整层办公空间</div>
                            <div class="flex flex-wrap gap-1 mb-2">
                                <span class="tag tag-blue">整层</span>
                                <span class="tag tag-green">落地窗</span>
                                <span class="tag tag-purple">可分割</span>
                            </div>
                            <div class="text-sm text-gray-600 dark:text-gray-400 mb-3">
                                科技园B区整层出租，视野开阔，全落地窗设计，可按需分割，适合大型企业总部。
                            </div>
                            <div class="flex justify-between items-center">
                                <div>
                                    <span class="text-lg font-bold text-blue-600 dark:text-blue-400">¥25,800</span>
                                    <span class="text-sm text-gray-500 dark:text-gray-400">/月</span>
                                    <span class="text-sm text-gray-500 dark:text-gray-400 ml-2">450㎡</span>
                                </div>
                                <button class="px-4 py-1.5 bg-blue-500 dark:bg-blue-600 text-white text-sm rounded-full">
                                    查看详情
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 检测系统暗色模式
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.body.classList.add('dark-mode');
            document.querySelectorAll('.ios-status-bar, .ios-nav-bar, .glass-card, .ios-search, .ios-search-input, .filter-chip, .housing-item, .tag-blue, .tag-green, .tag-purple').forEach(el => {
                el.classList.add('dark');
            });
        }
        
        // 监听系统暗色模式变化
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
            if (e.matches) {
                document.body.classList.add('dark-mode');
                document.querySelectorAll('.ios-status-bar, .ios-nav-bar, .glass-card, .ios-search, .ios-search-input, .filter-chip, .housing-item, .tag-blue, .tag-green, .tag-purple').forEach(el => {
                    el.classList.add('dark');
                });
            } else {
                document.body.classList.remove('dark-mode');
                document.querySelectorAll('.ios-status-bar, .ios-nav-bar, .glass-card, .ios-search, .ios-search-input, .filter-chip, .housing-item, .tag-blue, .tag-green, .tag-purple').forEach(el => {
                    el.classList.remove('dark');
                });
            }
        });
    </script>
</body>
</html> 